<template>
  <p>Counter: {{ counter }}</p>
  <button @click="update">
    Update
  </button>
</template>

<script setup lang="ts">
import { ref, customRef } from "vue";
/**
* 实现 useLocalStorage 函数
*/
function useLocalStorage(key: string, initialValue: any) {
  // 使用 customRef 创建一个响应式的对象
  const value = customRef((track, trigger) => {
    return {
      // getter 方法用于获取本地存储的值
      get() {
        track();
        return localStorage.getItem(key) ?? initialValue;
      },
      // setter 方法用于设置本地存储的值
      set(nvals) {
        localStorage.setItem(key, nvals);
        trigger();
      }
    };
  });
  // 返回这个响应式对象
  return value;
}

// 调用 useLocalStorage 函数,传入 key 和默认值,得到一个响应式对象 counter
const counter = useLocalStorage("counter", 0);

// 打印 counter 的值
console.log(counter.value);

// 定义一个函数 update,用于更新 counter 的值
function update() {
  // 调用 counter 的 setter 方法,将值加 1
  counter.value++;
}

// 定义一个函数 Self,用于将 counter 的值减 1
function Self() {
  if (counter.value > 0) {
    counter.value--;
  }
}

// 定义一个函数 empty,用于将 counter 的值设置为 0
function empty() {
  counter.value = 0;
}

</script>